<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>OverType - Custom Theme Example</title>
    <style>
        body {
            font-family: system-ui, -apple-system, sans-serif;
            max-width: 1000px;
            margin: 0 auto;
            padding: 40px 20px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
        }
        
        .container {
            background: white;
            border-radius: 12px;
            padding: 30px;
            box-shadow: 0 20px 40px rgba(0,0,0,0.2);
        }
        
        h1 {
            color: #333;
            margin-bottom: 10px;
        }
        
        .subtitle {
            color: #666;
            margin-bottom: 30px;
        }
        
        .editor-container {
            height: 400px;
            background: white;
            border: 2px solid #e0e0e0;
            border-radius: 8px;
            overflow: hidden;
            margin-bottom: 20px;
        }
        
        .theme-selector {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            gap: 10px;
            margin-bottom: 20px;
        }
        
        .theme-button {
            padding: 12px;
            border: 2px solid transparent;
            background: #f5f5f5;
            border-radius: 6px;
            cursor: pointer;
            text-align: center;
            transition: all 0.3s;
            font-size: 14px;
        }
        
        .theme-button:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        }
        
        .theme-button.active {
            border-color: #4a90e2;
            background: #e3f2fd;
        }
        
        .color-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 15px;
            margin-top: 20px;
            padding: 20px;
            background: #f9f9f9;
            border-radius: 8px;
        }
        
        .color-input {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .color-input label {
            flex: 1;
            font-size: 13px;
            color: #555;
        }
        
        .color-input input[type="color"] {
            width: 40px;
            height: 30px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        
        .controls {
            display: flex;
            gap: 10px;
            margin-top: 20px;
        }
        
        button {
            padding: 10px 20px;
            border: none;
            background: #4a90e2;
            color: white;
            border-radius: 6px;
            cursor: pointer;
            font-size: 14px;
            transition: background 0.3s;
        }
        
        button:hover {
            background: #357abd;
        }
        
        .preset-themes {
            margin-top: 20px;
        }
        
        .preset-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
            gap: 10px;
            margin-top: 10px;
        }
        
        .preset-button {
            padding: 8px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 12px;
            transition: transform 0.2s;
        }
        
        .preset-button:hover {
            transform: scale(1.05);
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>OverType Custom Theme Example</h1>
        <p class="subtitle">Create and apply custom color themes</p>
        
        <div id="editor" class="editor-container"></div>
        
        <div class="preset-themes">
            <h3>Quick Presets</h3>
            <div class="preset-grid">
                <button class="preset-button" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); color: white;" onclick="applyPreset('valentine')">Valentine</button>
                <button class="preset-button" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); color: white;" onclick="applyPreset('aqua')">Aqua</button>
                <button class="preset-button" style="background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%); color: white;" onclick="applyPreset('mint')">Mint</button>
            </div>
        </div>
    </div>

    <script src="../dist/overtype.js"></script>
    <script>
        const OT = window.OverType?.default || window.OverType;

        const presetThemes = {
            valentine: {
                bgPrimary: '#ffe0ec',
                text: '#880e4f',
                h1: '#e91e63',
                h2: '#f06292',
                strong: '#e91e63',
                em: '#f06292'
            },
            aqua: {
                bgPrimary: '#e0f7fa',
                text: '#006064',
                h1: '#00acc1',
                h2: '#26c6da',
                strong: '#00acc1',
                em: '#26c6da'
            },
            mint: {
                bgPrimary: '#e8f5e9',
                text: '#1b5e20',
                h1: '#4caf50',
                h2: '#66bb6a',
                strong: '#4caf50',
                em: '#66bb6a'
            }
        };

        // Initialize editor
        const [editor] = new OT('#editor', {
            value: `# Custom Theme Demo

This editor supports **custom themes** with color customization.

## Quick Presets

Try the **Valentine**, *Aqua*, or **Mint** themes below!

## Features

- \`Live theme switching\`
- **Bold** and *italic* text
- [Links](https://example.com)
- Inline \`code\` snippets

> Blockquotes look great too!

### Code Example

\`\`\`javascript
const theme = {
  bgPrimary: '#e0f7fa',
  text: '#006064'
};
\`\`\`

---

Happy theming! 🎨`,
            theme: 'solar'
        });

        function applyPreset(presetName) {
            const preset = presetThemes[presetName];
            if (preset) {
                // Merge with solar theme as base
                const theme = {
                    name: presetName,
                    colors: {
                        ...OT.themes.solar.colors,
                        ...preset
                    }
                };
                editor.setTheme(theme);
                console.log('Applied preset:', presetName);
            }
        }
    </script>
</body>
</html>